<template>
  <section class="engineer-build-fork">
    <DivShell title="工程建设跟踪">
      <div class="container">
        <div>
          <CircleProgress
            :key="reFresh"
            id="shcrCircle"
            :width="60*desgin1pxToCilent"
            :radius="4*desgin1pxToCilent"
            :progress="100*(reBuildData.aoiStatist.officeBuilding/reBuildData.staticData.projectTotal)"
            :delay="200"
            :duration="1000"
            barColor="#307FFF"
            backgroundColor="#283864"
            :isRound="true"
            :isAnimation="true"
            timeFunction="cubic-bezier(0.99, 0.01, 0.22, 0.94)"
          />
          <div class="cont">{{Math.round(100*(reBuildData.aoiStatist.officeBuilding/reBuildData.staticData.projectTotal))}}%</div>
          <p>写字楼</p>
        </div>
        <div>
          <CircleProgress
            :key="reFresh"
            id="wwsjCircle"
            :width="60*desgin1pxToCilent"
            :radius="4*desgin1pxToCilent"
            :progress="100*(reBuildData.aoiStatist.returnHouse/reBuildData.staticData.projectTotal)"
            :delay="200"
            :duration="1000"
            barColor="#4AEBE2"
            backgroundColor="#283864"
            :isRound="true"
            :isAnimation="true"
            timeFunction="cubic-bezier(0.99, 0.01, 0.22, 0.94)"
          />
          <div class="cont">{{Math.round(100*(reBuildData.aoiStatist.returnHouse/reBuildData.staticData.projectTotal))}}%</div>
          <p>回迁房</p>
        </div>
        <div>
          <CircleProgress
            :key="reFresh"
            id="csglCircle"
            :width="60*desgin1pxToCilent"
            :radius="4*desgin1pxToCilent"
            :progress="100*(reBuildData.aoiStatist.school/reBuildData.staticData.projectTotal)"
            :delay="200"
            :duration="1000"
            barColor="#864AEB"
            backgroundColor="#283864"
            :isRound="true"
            :isAnimation="true"
            timeFunction="cubic-bezier(0.99, 0.01, 0.22, 0.94)"
          />
          <div class="cont">{{Math.round(100*(reBuildData.aoiStatist.school/reBuildData.staticData.projectTotal))}}%</div>
          <p>学校</p>
        </div>
        <div>
          <CircleProgress
            :key="reFresh"
            id="lzjfCircle"
            :width="60*desgin1pxToCilent"
            :radius="4*desgin1pxToCilent"
            :progress="100*(reBuildData.aoiStatist.roadBridge/reBuildData.staticData.projectTotal)"
            :delay="200"
            :duration="1000"
            barColor="#EB7D4A"
            backgroundColor="#283864"
            :isRound="true"
            :isAnimation="true"
            timeFunction="cubic-bezier(0.99, 0.01, 0.22, 0.94)"
          />
          <div class="cont">{{Math.round(100*(reBuildData.aoiStatist.roadBridge/reBuildData.staticData.projectTotal))}}%</div>
          <p>路桥</p>
        </div>
      </div>
    </DivShell>
  </section>
</template>

<script>
import { mapGetters } from 'vuex'
import DivShell from '@src/components/divShell.vue'
import CircleProgress from '@src/components/circle-progress.vue'
export default {
  name: "EngineerBuildFork",
  components:{
    DivShell,
    CircleProgress
  },
  props: {
    title:{
      type: String,
      default:'丰图精准决策数字底板'
    }
  },
  data() {
    return {
      reFresh:1
        
    };
  },
  computed: {
    ...mapGetters(['reBuildData']),
  },
  watch:{
    reBuildData: {
      handler(cval, oval) {
        ++this.reFresh
      },
      deep: true
    }
  },
  mounted() {
     
  },
  methods: {
    
  },
  beforeDestroy() {
      
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .engineer-build-fork{
    margin-bottom: 18px;
    & .container{
      display: flex;
      justify-content: space-around;
      &>div{
        width: 60px;
        position: relative;
        &>.cont{
          position: absolute;
          top: 20px;
          left: 0;
          color: #FFFFFF;
          width: 100%;
          text-align: center;
          font-size: 16px;
        }
        &>p{
          margin-top: 13px;
          font-size: 14px;
          text-align: center;
          color: #707DA4;
        }
      }
    }
  }
</style>
